<!doctype html>
<html lang="en">
  <head>
    <title>Vis Network | Edge Styles | Static smooth curves</title>

    <script
      type="text/javascript"
      src="../../../standalone/umd/vis-network.min.js"
    ></script>

    <style type="text/css">
      #mynetwork {
        width: 500px;
        height: 500px;
        border: 1px solid lightgray;
      }
    </style>
  </head>

  <body>
    <h2>Smooth curves</h2>
    <div style="width: 700px; font-size: 14px; text-align: justify">
      All the smooth curves in the examples so far have been using dynamic
      smooth curves. This means that each curve has a support node which takes
      part in the physics simulation. For large networks or dense clusters, this
      may not be the ideal solution. To solve this, static smooth curves have
      been added. The static smooth curves are based only on the positions of
      the connected nodes. There are multiple ways to determine the way this
      curve is drawn. This example shows the effect of the different types.
      <br />
      <br />
      Drag the node around to see how the smooth curves are drawn for each
      setting. For animated system, we recommend only the continuous mode. In
      the next example you can see the effect of these methods on a large
      network. Keep in mind that the direction (the from and to) of the curve
      matters.
      <br />
      <br />
      When you select the dynamic type, you can see the interaction with the
      fixed node and the edge, any other type will not interact with other
      nodes.
      <br />
      <br />
    </div>

    <div id="mynetwork"></div>

    <script type="text/javascript">
      // create an array with nodes
      var nodes = [
        { id: 1, label: "Fixed node", x: 0, y: 0, fixed: true },
        { id: 2, label: "Drag me", x: 150, y: 130, physics: false },
        { id: 3, label: "Obstacle", x: 80, y: -80, fixed: true, mass: 10 },
      ];

      // create an array with edges
      var edges = [{ from: 1, to: 2, arrows: "to" }];

      // create a network
      var container = document.getElementById("mynetwork");
      var data = {
        nodes: nodes,
        edges: edges,
      };
      var options = {
        physics: true,
        configure: function (option, path) {
          if (path.indexOf("smooth") !== -1 || option === "smooth") {
            return true;
          }
          return false;
        },
        edges: {
          smooth: {
            type: "continuous",
          },
        },
      };
      var network = new vis.Network(container, data, options);
    </script>
  </body>
</html>
